/**
 * Created by Administrator on 2016/9/19.
 */
var myFormType = {
    textForm:document.getElementById('text'),
    radioForm:document.getElementById('radio'),
    checkboxForm:document.getElementById('checkbox'),
    selectForm:document.getElementById('select'),
    textareaForm:document.getElementById('textarea')
};
var formData = {
    formName : document.getElementById('formName'),        //名称显示输出的表单类型
    necessary : document.getElementById('necessary'),      //必填
    unnecessary : document.getElementById('unnecessary'),  //选填
    formStyle : document.getElementById('formStyle'),      //样式（select）
    lengthLimit : document.getElementById('lengthLimit'),  //长度限制的fieldset
    min_num : document.getElementById('min_num'),          //最小字符
    max_num : document.getElementById('max_num'),          //最大字符
    selectForm : document.getElementById('selectForm'),//用逗号回车分隔的fieldset
    optText : document.getElementById('optText'),//用逗号回车分隔的input
    addBtn : document.getElementById('addBtn'),//添加按钮
    right : document.getElementById('right'),  //右侧容纳表单的div
    myField : document.getElementsByClassName("myField"),  //fieldset集合
    formField:document.getElementById('formField'),
    right_form:document.getElementById('right_form'),
    btn:document.getElementById('btn'),
    tags:document.getElementById('tags')
};
//绑定事件
function addEvent(element,eventName,listener){
    if(element.addEventListener){
        element.addEventListener(eventName,listener,false);
    }
    else if(element.attachEvent){
        element.attachEvent('on'+eventName,listener);
    }
    else{
        element['on'+eventName] = listener;
    }
}
//配置表单数据
function DataForm(mydata){
    this.eleData = mydata;
    this.formData = {
        myformtype:'input',
        myformlabel:'',
        necessary:'true',
        myformstyle:'样式一',
        myinputtype:'',
        min_num:4,
        max_num:16
    };
}
DataForm.prototype = {

    addEvent:function(element,eventName,listener){
    if(element.addEventListener){
        element.addEventListener(eventName,listener,false);
    }
    else if(element.attachEvent){
        element.attachEvent('on'+eventName,listener);
    }
    else{
        element['on'+eventName] = listener;
    }
},

    //设置表单类型
    setFormType:function(data){
//        alert('d')
        this.formData.myformtype = data;
    },
    //设置配置中的名称
    setFormLabel:function(data){
        this.formData.myformlabel = data;
        this.eleData.formName.value = this.formData.myformlabel;
    },
    //设置是否为必填
    setFormIsnec:function(data){
        this.formData.necessary = data;
    },
    //设置表单样式
    setFormStyle:function(data){
        this.formData.myformstyle = data;
    },
    //设置input表单类型
    setInputType:function(data){
        this.formData.myinputtype = data;
    },
    getNumLimit:function(data1,data2){
        if(parseInt(data1)<parseInt(data2)){
            this.formData.min_num = data1;
//            alert(this.formData.min_num);
            this.formData.max_num = data2;
        }else {
            alert('字符限制不符合规则');
        }
  },
    //新建表单节点
    createForm:function(data){
//        alert('123')
        var newDiv = document.createElement('div');
        newDiv.className = 'form_div';
        var classname1,classname2,spanInner;
        if(data.necessary){
            data.rules = "必填，长度为"+data.min_num+"-"+data.max_num+"个字符";
            classname1 = 'necessary';
            spanInner = '必填,';
        }else{
            data.rules = "选填，长度为"+data.min_num+"-"+data.max_num+"个字符";
            classname1 = 'unnecessary';
            spanInner = '选填,';
        }
//        alert(data.rules);
        classname2 = data.form_type == '样式一'?'style1':'style2';
//        alert(newDiv);
        var newForm = '';
        switch(data.type){
            case 'input':{
                switch (data.input_type){
                    case '':alert('请选择输入框类型');
                        break;
                    case 'text':
                    case 'password':
                        newForm = "<label class='mylabel'>"+data.label+":</label><input name = '"+data.input_type+"' type='"+data.input_type+"'class='"+classname1+' '+classname2+"'></br><span class='hide formspan'>"+data.rules+"</span>";
                        break;
                    case 'number':
//                        alert(data.necessary);
                        newForm = "<label class='mylabel'>"+data.label+":</label><input name = '"+data.input_type+"' type='"+data.input_type+"' class='"+classname1+' '+classname2+"'></br><span class='hide formspan'>"+spanInner+"请输入"+data.label+"</span>";
                        break;
                    case 'email':
                    case 'phone':
                        newForm = "<label class='mylabel'>"+data.label+":</label><input name = '"+data.input_type+"' type='text' class='"+classname1+' '+classname2+"'></br><span class='hide formspan'>"+spanInner+"请输入"+data.label+"</span>";
                        break;
                }
            }
                break;
            case 'textarea':
//                alert(data.input_type);
                newForm = "<label class='mylabel1'>"+data.label+":</label><textarea name='textarea' class='"+classname1+' '+classname2+"'></textarea></br><span class='hide formspan'>"+data.rules+"</span>";
                break;
            case 'radio':
            case 'checkbox':
//                this.clearTags();
                var tags = this.tagContent();
//                alert(tags.length)
                newForm = this.createForms(data,tags);
//                alert(newForm);
                break;
            case 'select':
                var tags = this.tagContent();
                newForm = this.createOptions(data,tags);
                break;
            default :
                alert('出错了');
                break;
        }
        alert(newForm);
        if(newForm != ''){
            newDiv.innerHTML = newForm;
            this.eleData.right_form.insertBefore(newDiv,this.eleData.btn);
        }



},
    //tagdiv内容
    tagContent:function(){
        var tagDiv = this.eleData.tags.children;
        var len = tagDiv.length;
        var tags = [];
        for(var i = 0;i<len;i++){
            tags.push(tagDiv[i].innerHTML);
        }
        return tags;
    },

    //创建单选框，多选框
    createForms:function(mydata,mytags){
        var len = mytags.length;
        var newHtml = '';
        var myDiv = '';
        var classname;
        var spanInner;
        if(mydata.necessary){
            classname = 'necessary';
            spanInner = '必填，'
        }else{
            classname = 'unnecessary';
            spanInner = '选填，'
        }
        if(len == 0){
            alert("请添加元素");
        }else if(len == 1){
            alert('只有一个元素，无法创建'+mydata.label);
        }else{
            for(var i = 0;i<len;i++){
               newHtml += "<input  type='"+mydata.type+"'class='"+classname+"' name='"+mytags[0]+"' ><label>"+mytags[i]+"</label>";
            }
        }
        myDiv = "<div class='my'><span>"+mydata.label+":</span>"+newHtml+"</br><span class='formspan1'>"+spanInner+"请选择您的"+mydata.label+"</span></div>";
        return myDiv;
    },
    //option创建
    createOptions:function(mydata,mytags){
        var len = mytags.length;
        var newHtml = '';
        var myDiv = '';
        var classname;
        if(mydata.necessary){
            classname = 'necessary';
        }else{
            classname = 'unnecessary';
        }
        if(len == 0){
            alert("请添加元素");
        }else if(len == 1){
            alert('只有一个元素，无法创建'+mydata.label);
        }else{
            for(var i = 0;i<len;i++){
                newHtml += "<option>"+mytags[i]+"</option>";
            }
        }
        myDiv = "<div class='myradio'><span>"+mydata.label+":</span><select class='"+classname+"'>"+newHtml+"</select></br><span class='formspan1'>请选择您的"+mydata.label+"</span></div>";
        return myDiv;
    },

    //获取配置表单的基本数据
    getData :function() {
        var data = {
              type:'',  //表单类型
             label:'', //表单标签
         necessary:'', //是否必填
         form_type:'',   //表单样式
        input_type:'',//input类型
           min_num:'',
           max_num:'',
             rules: '必填，长度为4-16个字符',  //表单验证规则
           success: '格式正确',              // 验证通过提示
              fail: '名称不能为空' ,            // 验证失败提示
         validator: function () {}        // 表单验证规
     }
        data.type = this.formData.myformtype;
        data.label = this.formData.myformlabel;
        data.necessary = this.formData.necessary;
        data.form_type = this.formData.myformstyle;
        data.input_type = this.formData.myinputtype;
        data.min_num = this.formData.min_num;
        data.max_num = this.formData.max_num;
        return data;
    },
//    //表单验证
//    validator: function(){
//
//},
//确定输入框的类型
    getTextData:function(data){
        var input_type;
        input_type = data;
        return input_type;
    },
//输入框选择类型后，字符限制的隐藏和显示
    setTextField:function(text_type){
        switch(text_type){
            case '':alert('请选择输入框类型');
                break;
            case 'text':
            case 'password':
                this.eleData.myField[3].classList.remove('hide');
                break;
            case 'number':
            case 'email':
            case 'phone':
                this.eleData.myField[3].classList.add('hide');
                break;
        }
    },
    //根据类型不同选择不同的配置条件
    setFormField:function(form_type){
        switch(form_type){
            case 'input':
                this.eleData.myField[3].classList.add('hide');
                this.eleData.myField[2].classList.remove('hide');
                this.eleData.myField[4].classList.add('hide');
                break;
            case 'radio':
            case 'checkbox':
            case 'select':
                this.eleData.myField[2].classList.add('hide');
                this.eleData.myField[3].classList.add('hide');
                this.eleData.myField[4].classList.remove('hide');
                break;
            case 'textarea':
                this.eleData.myField[2].classList.add('hide');
                this.eleData.myField[3].classList.remove('hide');
                this.eleData.myField[4].classList.add('hide');
                break;

        }
    }


//a:function(){
//    alert('d')
//}
};
//创建选项节点的类
function TagCreate(){
DataForm.call(this.eleData);
this.tag = [];
this.length = 1;
}

TagCreate.prototype = new DataForm(formData);
TagCreate.prototype.constructor = TagCreate;
TagCreate.prototype.add=function(){
    var tags = [];
    var count = 0;
    var flag = true;
        addEvent(this.eleData.optText,'keyup',function(e){
           var selectEle = this.value;
            var str = selectEle.replace(/[ ,/n]/,'');
            str = str.trim();

            if(e.keyCode == 188 || e.keyCode == 32 || e.keyCode == '13'){
                var hasTags = this.nextElementSibling.children;
                var len = this.nextElementSibling.children.length;
                if(len == 0){
                flag = true;
                 }
                for(var i = 0;i<len;i++){
                    if(str == hasTags[i].innerText){
                        flag = false;
                    }
                }
                if(flag){
                    var tagDiv = document.createElement('div');
                    tagDiv.className = 'tagDiv';
                    tagDiv.innerHTML = str;
                    tags.push(str);
                    count++;
                    this.nextElementSibling.appendChild(tagDiv);
                    this.value = '';
                }else{
                    alert('该元素已存在');
                    flag = true;
                    this.value = '';
                }

                addEvent(tagDiv,'mouseover',function(){
                    this.className = 'tagDivOver';
                    this.innerHTML = '删除'+str;
                });
                addEvent(tagDiv,'mouseout',function(){
                    this.className = 'tagDiv';
                    tagDiv.innerHTML = str;
                });
                addEvent(tagDiv,'click',function(){
                    this.parentNode.removeChild(this);

                });
            }
        });
return tags;
    };
var my_validator = {
  text:function(myform,flag,n1,n2){
      var values = myform.value;
//      alert(myform.value)
      var count = 0;
      var error = 0;
      for(var i = 0;i<values.length;i++){
          if(/[a-zA-Z0-9]/.test(values[i])){
              count += 1;
          }else if(/[\u4E00-\u9FA5]/.test(values[i])){
              count += 2;
          }
      }
      if(count == 0){
          if(flag){
              myform.nextElementSibling.nextElementSibling.innerText = '名称不能为空';
              myform.nextElementSibling.nextElementSibling.style.color = 'red';
              myform.data = 'fail';
              error = 1;
          }else{
              myform.nextElementSibling.nextElementSibling.innerText = "选填，字符长度为"+n1+'-'+n2;
              myform.nextElementSibling.nextElementSibling.style.color = 'gray';
          }
      }
      else if(count >= n1 && count <= n2){
          myform.nextElementSibling.nextElementSibling.innerText = '格式正确';
          myform.nextElementSibling.nextElementSibling.style.color = 'green';
          error = 0;
      }else{
          myform.nextElementSibling.nextElementSibling.style.color = 'red';
          myform.nextElementSibling.nextElementSibling.innerText = "字符长度为"+n1+"~"+n2+"！";
          myform.data = 'fail';
          error = 1;
      }
      if(flag){
          return error;
      }else{
          return 0;
      }
  },
    number:function(myform,flag){
        var numvalue = myform.value;
        var error = 0;
//        alert(myform.value)
        if(myform.value == ''){
            if(flag){
                myform.nextElementSibling.nextElementSibling.innerHTML = '请填写数字';
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                error = 1;
                myform.data = 'fail';
            }else{
                myform.nextElementSibling.nextElementSibling.innerHTML = '选填，请填写数字';
                myform.nextElementSibling.nextElementSibling.style.color = 'gray';
            }
        }else if(/[\d]+/.test(myform.value)) {
            myform.nextElementSibling.nextElementSibling.innerHTML = '格式正确';
            myform.nextElementSibling.nextElementSibling.style.color = 'green';
            error = 0;
        }else{
            myform.nextElementSibling.nextElementSibling.innerHTML = '格式不正确';
            myform.nextElementSibling.nextElementSibling.style.color = 'red';
            error = 1;
        }
        if(flag){
            return error;
        }else{
            return 0;
        }
    },
    email:function(myform,flag){
        var emailValue = myform.value;
        var error = 0;
        if(emailValue == ''){
            if(flag){
//                alert('rec')
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                myform.nextElementSibling.nextElementSibling.innerText = '请输入邮箱';
                error = 1;
                myform.data = 'fail';
            }else{
                myform.nextElementSibling.nextElementSibling.style.color = 'gray';
                myform.nextElementSibling.nextElementSibling.innerText = '选填，请输入邮箱';
                error = 0;
            }
        }else if(/^[0-9a-zA-Z]+@(\w+)\.(\w+)(\.(\w+))?$/.test(emailValue)){
            myform.nextElementSibling.nextElementSibling.innerText = '邮箱格式正确';
            myform.nextElementSibling.nextElementSibling.style.color = 'green';
            error = 0;
        }else{
            myform.nextElementSibling.nextElementSibling.style.color = 'red';
            myform.nextElementSibling.nextElementSibling.innerText = '邮箱格式不正确';
            error = 1;
            myform.data = 'fail';
        }
       if(flag){
           return error;
       }else{
           return 0;
       }

    },
//    radio:function(eve){
//        var n = 0;
//      if(eve.type == 'radio'){
//          if(eve.checked){
//              eve.nextElementSibling.nextElementSibling.innerText = '单选框已选择';
//              eve.nextElementSibling.nextElementSibling.style.color = 'green';
//          }
//      } else if(eve.type == 'checkbox'){
//          if(eve.checked){
//              n++;
//          }else {
//              n--;
//          }
//      }
//        if(n == 0){
//            eve.nextElementSibling.nextElementSibling.innerText = '请选择多选框';
//            eve.nextElementSibling.nextElementSibling.style.color = 'red';
//        }else{
//            eve.nextElementSibling.nextElementSibling.innerText = '多选框已选择';
//            eve.nextElementSibling.nextElementSibling.style.color = 'green';
//        }
//    },
    password:function(myform,flag,n1,n2){
        var pwdValues = myform.value;
        var error = 0;
        var letter = 0;
        var number = 0;
        var len = pwdValues.length;
        if(pwdValues == ''){
            if(flag){
                myform.nextElementSibling.nextElementSibling.innerText = '请输入密码';
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                myform.data = 'fail';
                error = 1;
            }else{
                myform.nextElementSibling.nextElementSibling.innerText = '选填，请输入密码';
                myform.nextElementSibling.nextElementSibling.style.color = 'gray';
            }

        }else if(len>=6 && len<=20){
            for(var j = 0;j<len;j++){
                if(/[0-9]/.test(pwdValues[j])){
                    number += 1;
                }else if(/[a-zA-Z]/.test(pwdValues[j])){
                    letter += 1;
                }
            }
            if(number == 0 || letter == 0){
                myform.nextElementSibling.nextElementSibling.innerText = "格式错误，请输入"+n1+"-"+n2+"位字母和数字组合";
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                error = 1;
                myform.data = 'fail';
            }else{
                myform.nextElementSibling.nextElementSibling.innerText = '密码可用';
                myform.nextElementSibling.nextElementSibling.style.color = 'green';
                error = 0;
                myform.data = 'fail';
            }

        }else{
            myform.nextElementSibling.nextElementSibling.innerText = "格式错误，请输入"+n1+"-"+n2+"位字母和数字组合";
            myform.nextElementSibling.nextElementSibling.style.color = 'red';
            error = 1;
            myform.data = 'fail';
        }
        if(flag){
            return error;
        }else{
            return 0;
        }
    },
    phone:function(myform,flag){
        var phoneValue = myform.value;
        var errors = 0;
        if(phoneValue == ''){
            if(flag){
                myform.nextElementSibling.nextElementSibling.innerText = '请输入手机号码';
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                myform.data = 'fail';
                errors = 1;
            }else{
                myform.nextElementSibling.nextElementSibling.innerText = '选填，请输入手机号码';
                myform.nextElementSibling.nextElementSibling.style.color = 'gray';
            }


        }else{
            if(/^1\d{10}$/.test(phoneValue)){
                myform.nextElementSibling.nextElementSibling.innerText = '手机格式正确';
                myform.nextElementSibling.nextElementSibling.style.color = 'green';
                errors = 0;
            }else{
                myform.nextElementSibling.nextElementSibling.innerText = '手机格式不正确';
                myform.nextElementSibling.nextElementSibling.style.color = 'red';
                myform.data = 'fail';
                errors = 1;
            }
        }
        if(flag){
            return errors;
        }else{
            return 0;
        }
    },
    select:function(){

    },
    btnCheck: function () {
        var form_div = formData.right_form.children;
        var warning = '';
        var radioflag = 0;
        for (var i = 0; i < form_div.length; i++) {
            for (var j = 0; j < form_div[i].children.length; j++) {
                if (form_div[i].children[j].nodeName == 'INPUT'){
//                    alert('asd');
                      if(form_div[i].children[j].classList.contains('necessary')){
                        form_div[i].children[j].focus();
                        form_div[i].children[j].blur();
                        if(form_div[i].children[j].data == 'fail'){
                            warning += form_div[i].children[j].nextElementSibling.nextElementSibling.innerHTML+"\n";

                        }
                    }


                }else if(form_div[i].children[j].className == 'my'){
//                    alert('d')
                    var checkType = '';
                    var radioDiv = form_div[i].children[j].children;
                    var flag = 0;
                    var flag1 = 0;
                    for(var k = 0;k<radioDiv.length;k++){

                        if(radioDiv[k].type == 'radio' && radioDiv[k].classList.contains('necessary')){

                            checkType = 'radio';
                            if(radioDiv[k].checked){

                                flag++;
                            }
                        }else if(radioDiv[k].type == 'checkbox' && radioDiv[k].classList.contains('necessary')){
                            checkType = 'checkbox';
                            if(radioDiv[k].checked){


                                flag1++;
                            }
                        }
                    }
                    if(flag == 0 &&  checkType == 'radio'){
                        radioDiv[0].parentNode.lastElementChild.innerHTML = "请选择你的单选框";
                        radioDiv[0].parentNode.lastElementChild.style.color = 'red';
                        warning += radioDiv[0].parentNode.lastElementChild.innerHTML+"\n";

                    }else if(flag != 0 &&  checkType == 'radio'){
                        radioDiv[0].parentNode.lastElementChild.innerHTML = "单选框已选择";
                        radioDiv[0].parentNode.lastElementChild.style.color = 'green';
                    }
                    if(flag1 == 0 &&  checkType == 'checkbox'){
                        radioDiv[0].parentNode.lastElementChild.innerHTML = "请选择你的多选框";
                        radioDiv[0].parentNode.lastElementChild.style.color = 'red';
                        warning += radioDiv[0].parentNode.lastElementChild.innerHTML+"\n";
                    }else if(flag1 != 0 &&  checkType == 'checkbox'){
                        radioDiv[0].parentNode.lastElementChild.innerHTML = "多选框已选择";
                        radioDiv[0].parentNode.lastElementChild.style.color = 'green';
                    }
                }

            }
        }
        if(warning == ''){
            alert('提交成功');
        }else {
            alert(warning);
        }




    }

}
//表单验证函数
function FormValidator(myFormData){
    this.myformData = myFormData;
    this.forms = formData.right_form.children;
    this.btn = formData.btn;
}
FormValidator.prototype = {

    validator: function () {
        var data1 = this.myformData.min_num;
        var data2 = this.myformData.max_num;

//       alert(flag);
        var counts = 0;
        for (var i = 0; i < this.forms.length; i++) {
            for (var j = 0; j < this.forms[i].children.length; j++) {

                if (this.forms[i].children[j].name == 'text') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                        var formflag;
                        var n = 0;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        n = my_validator.text(this, formflag, data1, data2);
                        counts += n;
                        return n;
                    })
                }
                else if (this.forms[i].children[j].name == 'number') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        var formflag;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        counts += my_validator.number(this, formflag);
                    })
                } else if (this.forms[i].children[j].name == 'password') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        var formflag;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        counts += my_validator.password(this, formflag, data1, data2);
                    })
                } else if (this.forms[i].children[j].name == 'phone') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        var formflag;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        counts += my_validator.phone(this, formflag);
                    })
                } else if (this.forms[i].children[j].name == 'email') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        var formflag;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        counts += my_validator.email(this, formflag);
                    })

                } else if (this.forms[i].children[j].className == 'my') {
                    var n = 0;
                    for(var k = 0;i<this.forms[i].children[j].children.length;k++){

                        if(this.forms[i].children[j].children[k].type == 'radio'){
                            addEvent(this.forms[i].children[j].children[k], 'click', function () {

                                if(this.checked){

                                    this.parentNode.lastElementChild.innerHTML = "单选框已选择";
                                    this.parentNode.lastElementChild.style.color = 'green';
                                }
// else{
//                                    this.parentNode.lastElementChild.innerHTML = "请选择你的多选框";
//                                    this.parentNode.lastElementChild.style.color = 'red';
//                                }


                            })
                        }else if(this.forms[i].children[j].children[k].type == 'checkbox'){

                            addEvent(this.forms[i].children[j].children[k], 'click', function () {

                                if(this.checked){
                                    n++;
                                    this.parentNode.lastElementChild.innerHTML = "多选框已选择";
                                    this.parentNode.lastElementChild.style.color = 'green';
                                }else{
                                    n--;
                                    if(n == 0){
                                        this.parentNode.lastElementChild.innerHTML = "请选择你的多选框";
                                        this.parentNode.lastElementChild.style.color = 'red';
                                    }
                                }


                            })

                        }

                    }


                } else if (this.forms[i].children[j].name == 'textarea') {
                    addEvent(this.forms[i].children[j], 'focus', function () {
                        this.nextElementSibling.nextElementSibling.classList.remove('hide');
                    });
                    addEvent(this.forms[i].children[j], 'blur', function () {
                        var formflag;
                        if (this.classList.contains('necessary')) {
                            formflag = true;
                        } else {
                            formflag = false;
                        }
                        counts += my_validator.text(this, formflag, data1, data2);
                    })

                }
            }

        }
    }


}

//用户选择的表单类型和基本配置（必填或选填、样式）
function myFormBase(){
    var myForm = new DataForm(formData);
    var fieldChildren = formData.myField[0].children;
    var options = formData.formStyle.children;
    var textType = formData.myField[2].children;
    var data1,data2;
    data1 = formData.min_num.value;
    data2 = formData.max_num.value;
    //为表单类型绑定事件
    for(var i = 0;i<fieldChildren.length;i++){
//        alert('asd')
        if(fieldChildren[i].type == 'radio'){
            addEvent(fieldChildren[i],'click',function(){
                if(this.checked){
                   myForm.setFormType(this.id);
                   myForm.setFormLabel(this.nextElementSibling.innerHTML);
                   myForm.setFormField(this.id);
                }
            })
        }
    }
//为输入框类型绑定事件
    for(var j = 0;j<textType.length;j++){
        if(textType[j].type == 'radio'){

            addEvent(textType[j],'click',function(){
                if(this.checked){
//                    alert('inp')
                    myForm.setInputType(this.id);
                    myForm.setFormLabel(this.nextElementSibling.innerHTML);
                    myForm.setTextField(this.id);
                }
            })
        }
    }
    //为样式绑定事件
        addEvent(formData.formStyle, 'click', function () {
            for(var j = 0;j<options.length;j++) {
                if(options[j].selected){
                    myForm.setFormStyle(options[j].innerHTML);
            }

            }
        });
    //为必填绑定事件
    addEvent(formData.necessary,'click',function(){
        if(this.checked){
            myForm.setFormIsnec(true);
        }
    });
    //为选填绑定事件
    addEvent(formData.unnecessary,'click',function(){
        if(this.checked){
            myForm.setFormIsnec(false);
        }
    });
    //为字符最小值绑定函数
    addEvent(formData.min_num,'change',function(){
        data1 = this.value;
        myForm.getNumLimit(data1,data2);
    });
    //为字符最大值绑定函数
    addEvent(formData.max_num,'change',function(){
        data2 = this.value;
        myForm.getNumLimit(data1,data2);
    });
    //为选项添加内容绑定事件
    addEvent(formData.optText,'click',function(e){
       var tags = new TagCreate();
        tags.add();

    });
    //为添加表单按钮绑定事件
    addEvent(formData.addBtn,'click',function(){

        formData.right_form.classList.remove('hide');
        formData.btn.classList.remove('hide');
        var myData = myForm.getData();
        myForm.createForm(myData);
        var formCheck = new FormValidator(myForm.getData());
        formCheck.validator();
    });

    addEvent(formData.btn,'click',function(){
        my_validator.btnCheck();


    })

    return myForm;
}
myFormBase();
//var n = new TagCreate();
//n.add();